<template>
    <div class="orderDetails">
        <el-card class="box-card">
            <div class="title">订单详情</div>
            <el-form :inline="true" class="demo-form-inline" label-width="100px" style="padding-right: 80px;" :model="Form"
                ref="Form">
                <el-form-item label="客户姓名:" prop="name">
                    <el-input placeholder="审批人" v-model="Form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码:" prop="phone">
                    <el-input placeholder="审批人" v-model="Form.phone"></el-input>
                </el-form-item>
                <el-form-item label="意向车型:" prop="car">
                    <el-input placeholder="审批人" v-model="Form.car"></el-input>
                </el-form-item>
                <el-form-item label="价格:" prop="price">
                    <el-input placeholder="审批人" v-model="Form.price"></el-input>
                </el-form-item>
                <el-form-item label="定金:" prop="dingMoney">
                    <el-input placeholder="审批人" v-model="Form.dingMoney"></el-input>
                </el-form-item>
                <el-form-item label="已付款:" prop="paymentMoney">
                    <el-input placeholder="审批人" v-model="Form.paymentMoney"></el-input>
                </el-form-item>
                <!-- <div class="left"> -->
                <el-form-item label="待付:" prop="receiptMoney">
                    <el-input placeholder="审批人" v-model="Form.receiptMoney"></el-input>
                </el-form-item>
                <!-- </div> -->

            </el-form>
            <div class="water">
                <div class="title-money">
                    <span> 订单流水帐</span>
                </div>
                <div class="water-button">
                    <el-button type="primary" @click="add">添加流水账</el-button>
                </div>
            </div>

            <!-- 流水账表格 -->
            <el-table :data="tableData" style="width: 100%" :row-style="{ height: '60px' }" :header-cell-style="{
                backgroundColor: '#d4d4d4', lineHeight: '30px', fontSize: '13px', color: '#fff',
                textAlign: 'center'
            }" border>
                <el-table-column fixed prop="payNumber" label="支付单号" width="200">
                </el-table-column>
                <el-table-column fixed prop="sumMoney" label="金额" width="200">
                </el-table-column>
                <el-table-column fixed prop="payWay" label="支付方式" width="200">
                </el-table-column>
                <el-table-column fixed prop="payTime" label="支付时间" width="200">
                </el-table-column>
                <el-table-column fixed prop="payUse" label="支付用途" width="">
                </el-table-column>
            </el-table>

            <el-button class="back" @click="back">返回</el-button>
        </el-card>

        <!-- 添加流水账弹窗 -->
        <el-dialog :visible.sync="dialogFormVisible" width="510px">
            <el-form label-width="80px" :model="waterForm" ref="waterForm" :rules="rules">
                <el-form-item label="支付单号" prop="payNumber">
                    <el-input v-model="waterForm.payNumber"></el-input>
                </el-form-item>
                <el-form-item label="金额" prop="sumMoney">
                    <el-input v-model="waterForm.sumMoney"></el-input>
                </el-form-item>
                <el-form-item label="支付方式" prop="payWay">
                    <el-input v-model="waterForm.payWay"></el-input>
                </el-form-item>
                <el-form-item label="支付时间" prop="payTime" value-format=“yyyy-MM-dd>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="waterForm.payTime"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="waterForm.payTime"
                            style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注" prop="payUse">
                    <el-input type="textarea" resize="none" v-model="waterForm.payUse"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="sureAdd">确定</el-button>
                    <el-button @click="backClear">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getOrderList, addOrderDetails } from '../../api/index'
export default {
    name: "orderDetails",
    data() {
        return {
            rules: {
                payNumber: [{ required: true, message: "请输入支付单号", trigger: "blur" },],
                sumMoney: [{ required: true, message: "请输入金额", trigger: "blur" }],
                payWay: [{ required: true, message: "请输入支付方式", trigger: "blur" }],
                payTime: [{ required: true, message: "请输入支付时间", trigger: "blur" }],
                payUse: [{ required: true, message: "请输入用途", trigger: "blur" }],
            },
            tableData: [],
            // questionForm: {},
            Form: {},
            labelPosition: 'right',
            formLabelAlign: {
                name: '',
                region: '',
                type: ''
            },
            waterForm: {
                payNumber: ''
            },
            dialogFormVisible: false,
        }
    },
    dateFormat: function (row, column) {
        var date = row[column.property];
        if (date == undefined) {
            return "";
        }
        // 使用DD 如果使用dd 则变成 星期几 的英文缩写
        return moment(date).format("yyyy-MM-DD");
    },

    created() {
        this.geyData()
    },
    methods: {
        back() {
            this.$router.push('/order')
        },
        add() {
            console.log(this.dialogFormVisible);
            this.dialogFormVisible = true
        },
        // 流水账页面formdetil
        geyData() {
            let ryrzDetails = JSON.parse(this.$route.query.res)

            this.Form = ryrzDetails
            console.log(this.Form);
            console.log(this.Form.waterform);
        },
        sureAdd() {
            // row.time = moment(row.time).format("yyyy-MM-DD")
            this.$refs.waterForm.validate(valid => {
                //表单验证失败
                if (!valid) {
                    //提示语
                    this.$message("请将表格填写完整");
                    return false;
                } else {
                    if (this.modalType === 0) {
                        addOrderDetails(this.waterForm).then(() => {
                            this.getList()

                        })
                    } else {
                        console.log(this.waterForm);
                        // updateStudent(this.waterForm).then(() => {
                        //     this.getList()
                        // })
                    }
                }
            })

        },
        backClear() {
            this.waterForm = {}
        },

        async getList() {
            // 分页参数
            const _query = {
                _page: this.currentPage,
                _limit: this.pageSize
            }
            //搜索参数
            // if (!!this.keyword) {
            //     _query['name_like'] = this.keyword;
            // }
            const _res = await getOrderList(_query);
            this.tableData = _res.data[0].waterform;
            
            console.log(_res.data[0].waterform);
        }
    },
    mounted() {
        this.getList()
    }

}

</script>

<style lang="less" scoped>
.orderDetails .el-form {
    line-height: 20px;
}

// .left {
//     text-align: left;
// }

.orderDetails .title {
    width: 100%;
    line-height: 70px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}

.orderDetails .water .title-money {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
}

.water {
    line-height: 150px;
    display: flex;
    justify-content: space-between;
}

.water-button {
    margin-right: 20px;
}

.back {
    margin-top: 150px;
    padding: 13px 60px;
    background-color: #fff;
    color: #7F7F7F;
}
</style>
